<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
         .box-top {
             background: white;
             width: 190px;
             height: 0px;
             margin: 0px;
             border-style: solid;
             border-color: yellow red green blue;
         }
         .box-middle {
             background: white;
             width: 190px;
             height: 190px;
             margin: 0px;
             border-style: solid;
             border-color: yellow red green blue;
         }
         .box-bottom {
             background: white;
             width: 190px;
             height: 0px;
             margin: 0px;
             border-style: solid;
             border-color: yellow red green blue;
         }
         .top-radius-10 {
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
         }
         .bottom-radius-10 {
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 10px;
         }
         .top-radius-20 {
             border-top-left-radius: 20px;
             border-top-right-radius: 20px;
         }
         .bottom-radius-20 {
             border-bottom-left-radius: 20px;
             border-bottom-right-radius: 20px;
         }
         .top-radius-30 {
             border-top-left-radius: 30px;
             border-top-right-radius: 30px;
         }
         .bottom-radius-30 {
             border-bottom-left-radius: 30px;
             border-bottom-right-radius: 30px;
         }
         .top-radius-40 {
             border-top-left-radius: 40px;
             border-top-right-radius: 40px;
         }
         .bottom-radius-40 {
             border-bottom-left-radius: 40px;
             border-bottom-right-radius: 40px;
         }
         .box1-top {
             border-top-width: 30px;
             border-right-width: 10px;
             border-bottom-width: 0px;
             border-left-width: 10px;
         }
         .box1-middle {
             border-width: 0px 10px 0px 10px;
         }
         .box1-bottom {
             border-width: 0px 10px 10px 10px;
         }
         .box2-top {
             width: 170px;
             border-width: 10px 30px 0px 10px;
         }
         .box2-middle {
             width: 170px;
             border-width: 0px 30px 0px 10px;
         }
         .box2-bottom {
             width: 170px;
             border-width: 0px 30px 10px 10px;
         }
         .box3-top {
             border-width: 10px 10px 0px 10px;
         }
         .box3-middle {
             border-width: 0px 10px 0px 10px;
         }
         .box3-bottom {
             border-top-width: 0px;
             border-left-width: 10px;
             border-right-width: 10px;
             border-bottom-width: 30px;
         }
         .box4-top {
             width: 170px;
             border-width: 10px 10px 0px 30px;
         }
         .box4-middle {
             width: 170px;
             border-width: 0px 10px 0px 30px;
         }
         .box4-bottom {
             width: 170px;
             border-top-width: 0px;
             border-left-width: 30px;
             border-right-width: 10px;
             border-bottom-width: 10px;
         }
        </style>
    </head>
    <body>
        <h2>Border Radius - 10px</h2>
        Box#1
        <div id="box1-top" class="box-top box1-top top-radius-10"></div>
        <div id="box1-middle" class="box-middle box1-middle middle-radius-10"></div>
        <div id="box1-bottom" class="box-bottom box1-bottom bottom-radius-10"></div>
        <br>

        Box#2
        <div id="box2-top" class="box-top box2-top top-radius-10"></div>
        <div id="box2-middle" class="box-middle box2-middle middle-radius-10"></div>
        <div id="box2-bottom" class="box-bottom box2-bottom bottom-radius-10"></div>
        <br>

        Box#3
        <div id="box3-top" class="box-top box3-top top-radius-10"></div>
        <div id="box3-middle" class="box-middle box3-middle middle-radius-10"></div>
        <div id="box3-bottom" class="box-bottom box3-bottom bottom-radius-10"></div>
        <br>

        Box#4
        <div id="box4-top" class="box-top box4-top top-radius-10"></div>
        <div id="box4-middle" class="box-middle box4-middle  middle-radius-10"></div>
        <div id="box4-bottom" class="box-bottom box4-bottom bottom-radius-10"></div>
        <br>

        <h2>Border Radius - 20px</h2>
        Box#5
        <div id="box5-top" class="box-top box1-top top-radius-20"></div>
        <div id="box5-middle" class="box-middle box1-middle middle-radius-20"></div>
        <div id="box5-bottom" class="box-bottom box1-bottom bottom-radius-20"></div>
        <br>

        Box#6
        <div id="box6-top" class="box-top box2-top top-radius-20"></div>
        <div id="box6-middle" class="box-middle box2-middle middle-radius-20"></div>
        <div id="box6-bottom" class="box-bottom box2-bottom bottom-radius-20"></div>
        <br>

        Box#7
        <div id="box7-top" class="box-top box3-top top-radius-20"></div>
        <div id="box7-middle" class="box-middle box3-middle middle-radius-20"></div>
        <div id="box7-bottom" class="box-bottom box3-bottom bottom-radius-20"></div>
        <br>

        Box#8
        <div id="box8-top" class="box-top box4-top top-radius-20"></div>
        <div id="box8-middle" class="box-middle box4-middle middle-radius-20"></div>
        <div id="box8-bottom" class="box-bottom box4-bottom bottom-radius-20"></div>
        <br>

        <h2>Border Radius - 30px</h2>
        Box#9
        <div id="box9-top" class="box-top box1-top top-radius-30"></div>
        <div id="box9-middle" class="box-middle box1-middle middle-radius-30"></div>
        <div id="box9-bottom" class="box-bottom box1-bottom bottom-radius-30"></div>
        <br>

        Box#10
        <div id="box10-top" class="box-top box2-top top-radius-30"></div>
        <div id="box10-middle" class="box-middle box2-middle middle-radius-30"></div>
        <div id="box10-bottom" class="box-bottom box2-bottom bottom-radius-30"></div>
        <br>

        Box#11
        <div id="box11-top" class="box-top box3-top top-radius-30"></div>
        <div id="box11-middle" class="box-middle box3-middle middle-radius-30"></div>
        <div id="box11-bottom" class="box-bottom box3-bottom bottom-radius-30"></div>
        <br>

        Box#12
        <div id="box12-top" class="box-top box4-top top-radius-30"></div>
        <div id="box12-middle" class="box-middle box4-middle middle-radius-30"></div>
        <div id="box12-bottom" class="box-bottom box4-bottom bottom-radius-30"></div>
        <br>

        <h2>Border Radius - 40px</h2>
        Box#13
        <div id="box13-top" class="box-top box1-top top-radius-40"></div>
        <div id="box13-middle" class="box-middle box1-middle middle-radius-40"></div>
        <div id="box13-bottom" class="box-bottom box1-bottom bottom-radius-40"></div>
        <br>

        Box#14
        <div id="box14-top" class="box-top box2-top top-radius-40"></div>
        <div id="box14-middle" class="box-middle box2-middle middle-radius-40"></div>
        <div id="box14-bottom" class="box-bottom box2-bottom bottom-radius-40"></div>
        <br>

        Box#15
        <div id="box15-top" class="box-top box3-top top-radius-40"></div>
        <div id="box15-middle" class="box-middle box3-middle middle-radius-40"></div>
        <div id="box15-bottom" class="box-bottom box3-bottom bottom-radius-40"></div>
        <br>

        Box#16
        <div id="box16-top" class="box-top box4-top top-radius-40"></div>
        <div id="box16-middle" class="box-middle box4-middle middle-radius-40"></div>
        <div id="box16-bottom" class="box-bottom box4-bottom bottom-radius-40"></div>
        <br>
    </body>
</html>
